<template>
	<div class="viewingSettings">
		<div class="viewingSettingsItems">
			<div class="viewingSettingsItems_left">
				观看人数限制
			</div>
			<div class="viewingSettingsItems_right" @click='isXZMask = !isXZMask'>
				{{ from.setting[0].status == 1 ? '不限制' : '限制观看' }}
				<image src="@/static/image/right.png" mode=""></image>
			</div>
		</div>
		<div v-if='from.setting[0].status == 2'>
			<div class="viewingSettingsItems">
				<div class="viewingSettingsItems_left">
					<span>*</span> 观看人数限制
				</div>
				<div class="viewingSettingsItems_right people">
					<input type="number" v-model="from.setting[0].content.limitPeople" placeholder="请输入"
						placeholder-class="zj-placeholder-class">人
				</div>
			</div>
			<div class="viewingSettingsItems">
				<div class="viewingSettingsItems_left">
					<span>*</span> 提示文案
				</div>
				<div class="viewingSettingsItems_right">
					<input type="text" value="" placeholder="最多只能输入20个字" maxlength="20" max='20'
						v-model="from.setting[0].content.limitText" placeholder-class="zj-placeholder-class" />
				</div>
			</div>
		</div>
		<div class="viewingSettingsItems" :class='from.setting[1].status == 3 ? "" : "noBorder"'
			@click='isFSMask = !isFSMask'>
			<div class="viewingSettingsItems_left">
				观看方式
			</div>
			<div class="viewingSettingsItems_right">
				{{ from.setting[1].status | limitFilter }}
				<image src="@/static/image/right.png" mode=""></image>
			</div>
		</div>
		<!-- 观看模式 -->
		<div class="viewMS" v-if="from.setting[1].status == 2">
			<div class="viewMSCont">
				<div class="viewMSCont_items">
					<div class="viewMSCont_items_left">
						<span>*</span>观看价格
					</div>
					<div class="viewMSCont_items_rigjt">
						<input type="digit" v-model="priceNum" @input="priceEvnet" @blur="priceEvnet" @change="priceEvnet" placeholder="请输入"
							placeholder-class="zj-placeholder-class" max="50000" maxlength="5">元
					</div>
				</div>
				<div class="viewMSCont_lable">
					最低0.01元 最高50，000元
				</div>

				<div class="viewMSCont_items">
					<div class="viewMSCont_items_left">
						<span>*</span>白名单观看<p @click='viewWhiteEvent()'>查看白名单</p>
					</div>
					<div class="viewMSCont_items_rigjt">
						<div class="useLable">
							<u-switch v-model="from.setting[2].status" @change="changeSwitch" activeColor="#295EFF">
							</u-switch>
						</div>
					</div>
				</div>
				<div class="viewMSCont_lable">
					开启后观众进入直播间时头像和昵称将会脱敏展示
				</div>
			</div>
		</div>
		<!-- 密码观看 -->
		<div class="viewingSettingsItems noBorder" v-if="from.setting[1].status == 3">
			<div class="viewingSettingsItems_left">
				<span>*</span> 观看密码
			</div>
			<div class="viewingSettingsItems_right">
				<input class="uni-input" placeholder="请输入密码" ref="passwordValue" @input="passwordEvent" v-model="passsWords"
					:password="showPassword" placeholder-class="zj-placeholder-class" />
				<image src="@/static/image/closeEay.png" mode="" v-if="showPassword" @click="showPassword = !showPassword">
				</image>
				<image src="@/static/image/openEay.png" mode="" v-else @click="showPassword = !showPassword"></image>
			</div>
		</div>
		<!-- 白名单观看 -->
		<div class='viewingSettingsWhite' @click='viewWhiteEvent()' v-if="from.setting[1].status == 4">
			查看白名单
		</div>
		<!-- 报名观看 -->
		<div class="viewingSettingsItems noBorder" v-if="from.setting[1].status == 5">
			<div class='viewingSettingsItemsAdd' @click='isApplyShowEvent'>
				<span>+</span> 绑定报名表
			</div>
		</div>
		<div class='viewingSettingsCont' v-if="from.setting[1].status == 5">
			<div class="viewingSettingsContBox" v-if="entryList.length > 0">
				<div class="productItems" v-for="(ite, idx) in entryList" :key="idx">
					<div class='productItemsIcon'>
						<div class='productItemsIconX' v-if="ite.check == false">

						</div>
						<div class='productItemsIconW' v-if="ite.check == true">
							<div class='productItemsIconWs'>

							</div>
						</div>
					</div>
					<div class="productItems_left">
						<div class="productItems_left_img">
							<image :src="ite.cover || ''" mode=""></image>
						</div>
					</div>
					<div class="productItems_right">
						<div class="productItems_right_top">
							<div class="productItems_right_top_left ex">
								{{ ite.name }}
							</div>
							<div class="productItems_right_top_right" v-if='ite.status == 1'>
								<div class='yd'></div> 报名中
							</div>

							<div class='productItems_right_top_icon' v-if='ite.status != 1' @click='deleteEvent(ite, idx)'>
								<u-icon name="minus-circle" color='#FF5A5F'></u-icon>
							</div>
						</div>
						<div class="productItems_right_bottom">
							报名人数：{{ ite.entryNum || '0' }}
							<div class='productItems_right_bottom_btn' v-if='ite.status != 1'
								@click='entryFormLiveOpenEvent(ite)'>
								开启
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部选择是否限制 -->
		<div class="allMask" v-if='isXZMask' @click='isXZMask = false'>

		</div>
		<div class="redDB" v-if='isXZMask'>
			<div class="redDB_items" @click.stop='XZEvent(1)'>
				不限制
			</div>
			<div class="redDB_items" @click.stop='XZEvent(2)'>
				限制观看
			</div>
			<div class="redDB_items_btn redDB_items" @click='isXZMask = false'>
				取消
			</div>
		</div>
		<!-- 选择报名单 -->
		<div class='allMask' v-if="isApplyShow">

		</div>
		<closeApplyMask @closeProductMaskEvnet='isApplyShow = false' v-if="isApplyShow" @addEvent='addEvent'>
		</closeApplyMask>

		<!-- 底部选择是否限制 -->
		<div class="allMask" v-if='isFSMask' @click='isFSMask = false'>

		</div>
		<div class="redDB" v-if='isFSMask'>
			<div class="redDB_items" @click.stop='FSEvent(1)'>
				公开
			</div>
			<div class="redDB_items" @click.stop='FSEvent(2)'>
				付费观看
			</div>
			<div class="redDB_items" @click.stop='FSEvent(3)'>
				密码观看
			</div>
			<div class="redDB_items" @click.stop='FSEvent(4)'>
				白名单观看
			</div>
			<div class="redDB_items" @click.stop='FSEvent(5)'>
				报名观看
			</div>
			<div class="redDB_items_btn redDB_items" @click='isFSMask = false'>
				取消
			</div>
		</div>
		<div class="liveInformationBtn" @click='saveLiveEvent' v-if="!isApplyShow">
			<div class="liveInformationBtnCont">
				保存
			</div>
		</div>
	</div>
</template>

<script>
import closeApplyMask from './closeApplyMask.vue'
export default {
	components: {
		closeApplyMask
	},
	props: {
		setInfo: [Object, String],
		liveId: [Number, String]
	},
	filters: {
		limitFilter(v) {
			var s = ''
			switch (v) {
				case 1:
					s = '公开'
					break;
				case 2:
					s = '付费观看'
					break;
				case 3:
					s = '密码观看'
					break;
				case 4:
					s = '白名单观看'
					break;
				case 5:
					s = '报名观看'
					break;
				default:
					s = '公开'
					break;
			}
			return s
		},
		passwordFilter(v) {
			return v
		}
	},
	data() {
		return {
			showPassword: true,
			isXZMask: false,
			isFSMask: false, //方式
			from: {
				liveId: '',
				setting: [{
					content: {
						limitPeople: '',
						limitText: '',
					},
					status: 1,
					type: 'limitUv'
				},
				{
					status: 1,
					type: 'limit'
				},
				{
					status: 1,
					type: 'whitelist'
				},

				]

			},
			entryList: [], //绑定的列表
			isApplyShow: false, //报名列表弹窗
			passsWords: '',
			priceNum: ''
		}
	},
	watch: {
		setInfo(newVal, oldVal) {
			this.changeData(newVal)
		}
	},
	mounted() {
		this.from.liveId = this.liveId
		this.changeData(this.setInfo)
		this.getProductList()
	},
	methods: {
		changeData(d) {
			const v = JSON.parse(JSON.stringify(d))
			if (!v.setting) return
			v.setting.forEach((ite) => {
				console.log('ite.type', ite.type)
				if (ite.type == 'limit' || ite.type == 'limitUv') {
				} else {
					ite.status = ite.status == 1 ? true : false
				}
			})
			for (var i in this.from.setting) {
				for (var k in v.setting) {
					if (this.from.setting[i].type == v.setting[k].type) {
						this.$set(this.from.setting, i, v.setting[k])
						// this.from.setting[i] = JSON.parse(JSON.stringify(v.setting[k]))
						// this.from.setting[i].status = v.setting[k].status
						if (this.from.setting[i].type == 'limitUv') {
							// this.from.setting[i].status = this.from.setting[i].status == true ? 1 : 2
							const status = v.setting[k].status == 2 ? 1 : 2
							console.log('from.setting[0].status ==from.setting[0].status ==', this.from.setting[i].content)
							this.$set(this.from.setting[i], 'status', status)
							if (this.from.setting[i].content != '' && this.from.setting[i].content != '""') {
								this.from.setting[i].content = JSON.parse(this.from.setting[i].content)
							} else {
								this.from.setting[i].content = {
									limitPeople: 1000,
									limitText: '观看人数已达上限'
								}
							}

						} else {
							this.$set(this.from.setting[i], 'status', v.setting[k].status)
						}
						// 设置价格
						if (this.from.setting[i].status == 2 && this.from.setting[i].type == 'limit') {
							this.from.setting[i].content = Number(this.from.setting[i].content) / 100
						}
						// 密码
						if (this.from.setting[i].status == 3 && this.from.setting[i].type == 'limit') {
							this.from.setting[i].content = Number(this.from.setting[i].content)
						}
						console.log('111', this.from)
					}

				}
			}

		},
		// 查看白名单
		viewWhiteEvent() {
			uni.navigateTo({
				url: '/pages/LiveConfig/whitelist?liveId=' + this.liveId
			})
		},
		changeSwitch() {

		},
		passwordEvent(event) {
			console.log("passwordEventpasswordEvent", event)
			const inputType = /[\W]/g
			this.$nextTick(() => {
				setTimeout(() => {
					// this.$set(this.from.setting[1], 'content',event.target.value.replace(inputType, ''))
					this.passsWords = event.target.value.replace(inputType, '')
					// this.$forceUpdate();
				}, 10)

			})
			console.log("inputTypeinputType", this.from.setting[1].content)
		},
		priceEvnet(event) {
			setTimeout(() => {
				if ( event.target.value >= 50000) {
					this.priceNum = 50000
				} else if (this.priceNum <= 0) {

				}
			}, 300)
		},
		// 获取到列表
		async getProductList() {
			const {
				data
			} = await this.$request(this.$Api.entryFormListInLive, {
				liveId: this.liveId
			}, "get")
			if (data.code != 200) return
			if (!data.data.list) return
			this.entryList = data.data.list
			uni.stopPullDownRefresh()
		},
		// 开启
		async entryFormLiveOpenEvent(ite) {
			const {
				data
			} = await this.$request(this.$Api.entryFormLiveOpen, {
				entryFormId: ite.entryFormId,
				liveId: this.liveId
			}, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '绑定成功',
				icon: 'none',
				duration: 1500
			})
			this.getProductList()
		},
		XZEvent(type) {
			this.isXZMask = false
			this.from.setting[0].status = type
		},
		FSEvent(type) {
			this.from.setting[1].status = type
			this.from.setting[1].content = ''
			this.isFSMask = false
		},
		// 打开报名弹窗
		isApplyShowEvent() {
			this.isApplyShow = true
		},
		// 确定保存
		async addEvent(ite) {
			const {
				data
			} = await this.$request(this.$Api.entryFormLiveBind, {
				entryFormId: ite.entryFormId,
				liveId: this.liveId
			}, "post")
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			})
			this.getProductList()
			this.isApplyShow = false
		},
		// 确定将该报名移除吗?
		deleteEvent(ite, idx) {
			uni.showModal({
				title: '提示',
				content: '确定将该报名移除吗？',
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						// drawActivityId: "1801106215296569344"
						const {
							data
						} = await this.$request(this.$Api.entryFormLiveUnbind, {
							entryFormId: ite.entryFormId,
							liveId: this.liveId
						}, "POST")
						if (data.code !== 200) return
						// 执行软删除
						this.entryList.splice(idx, 1)
						uni.showToast({
							title: '移除成功',
							icon: 'none'
						})

					}
				}
			})
		},
		// saveLiveEvent
		async saveLiveEvent() {
			console.log('this.from)', this.from)
			if (this.from.setting[1].status == 3) {
				this.from.setting[1].content = this.passsWords
			} else if (this.from.setting[1].status == 2) {
				this.from.setting[1].content = this.priceNum
			}
			// 判断付费观看
			const params = JSON.parse(JSON.stringify(this.from))

			if (this.from.setting[1].status == 2) {
				if (this.from.setting[1].content > 50000 || this.from.setting[1].content < 0.01) {
					return uni.showToast({
						title: '观看金额最低0.01元 最高50，000元',
						icon: 'none',
						duration: 1500
					})
				} else {
					params.setting[1].content = Number(this.from.setting[1].content) * 100
				}
			}
			params.setting.forEach((ite) => {
				if (ite.type == 'limitUv') {
					ite.content = JSON.stringify(ite.content)
				} else if (ite.type == 'limit') {
					ite.content = ite.content.toString()
				}
				if (ite.status == true) {
					ite.status = 1
				} else if (ite.status == false) {
					ite.status = 2
				}
			})
			params.setting[0].status = params.setting[0].status == 2 ? 1 : 2
			const {
				data
			} = await this.$request(this.$Api.liveUpdateSetting, params, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '保存成功',
				icon: 'none',
				duration: 1500
			})
		}
	}

}
</script>

<style lang="scss">
.viewingSettings {
	width: 686rpx;
	min-height: 218rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
	// padding-bottom: 32rpx;

	.viewMS {
		padding-bottom: 32rpx;

		.viewMSCont {
			width: 622rpx;
			height: 268rpx;
			background: #F5F9FF;
			border-radius: 8rpx;
			padding: 24rpx 16rpx;
			box-sizing: border-box;

			.viewMSCont_items {
				font-size: 28rpx;

				span {
					color: #FF5A5F;
				}

				width: 100%;
				min-height: 64rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #464C5B;

				.viewMSCont_items_left {
					display: flex;
					align-items: center;

					span {
						color: #FF5A5F;
					}

					p {
						margin-left: 16rpx;
						color: #295EFF;
						font-size: 24rpx;
					}
				}



				.viewMSCont_items_rigjt {
					display: flex;
					align-items: center;
					text-align: right;

					input {
						width: 146rpx;
						height: 64rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 2rpx solid #E3E8EE;
						margin-right: 16rpx;
						text-align: center;
						padding: 0 16rpx;
						box-sizing: border-box;
					}

					image {
						width: 44rpx;
						height: 44rpx;
						margin-left: 16rpx;

					}
				}

			}

			.viewMSCont_lable {
				font-size: 20rpx;
				color: #BFBFBF;
				padding: 0 16rpx;
				margin-bottom: 16rpx;
				// margin-top: 8rpx;
				box-sizing: border-box;
			}
		}
	}

	.viewingSettingsItems {
		width: 100%;
		height: 108rpx;
		border-bottom: 1rpx solid #E3E8EE;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #464C5B;

		.viewingSettingsItemsAdd {
			width: 100%;
			height: 52rpx;
			border-radius: 8rpx;
			border: 2rpx solid #295EFF;
			font-size: 26rpx;
			color: #295EFF;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 48rpx;

			span {
				font-size: 40rpx;
				// margin-right: 16rpx;
				line-height: 30rpx;
				margin-top: -6rpx;
			}
		}

		.viewingSettingsItems_left {
			span {
				color: #FF5A5F;
			}
		}



		.viewingSettingsItems_right {
			display: flex;
			align-items: center;
			text-align: right;
			font-size: 28rpx;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-left: 16rpx;

			}

			input {
				font-size: 28rpx;
			}
		}

		.people {
			input {
				width: 146rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #E3E8EE;
				margin-right: 16rpx;
				text-align: center;
				padding: 0 16rpx;
				box-sizing: border-box;
			}
		}
	}

	.viewingSettingsCont {
		padding: 25rpx 0;
		box-sizing: border-box;

		.viewingSettingsContBox {
			background: #FAFBFF;
			padding: 26rpx 12rpx 1rpx 12rpx;
			box-sizing: border-box;
		}
	}

	.productItems {
		width: 100%;
		min-height: 144rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 24rpx;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.productItemsIcon {
			margin-right: 16rpx;

			.productItemsIconX {
				width: 32rpx;
				height: 32rpx;
				background: #F3F7FF;
				border: 2rpx solid #C2CBD6;
				border-radius: 50%;
			}

			.productItemsIconW {
				width: 32rpx;
				height: 32rpx;
				border: 2rpx solid #0073FF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.productItemsIconWs {
					width: 16rpx;
					height: 16rpx;
					background: #0073FF;
					border-radius: 50%;
				}
			}
		}

		.productItems_left {
			.productItems_left_img {
				width: 172rpx;
				height: 112rpx;
				background: #f5f5f5;
			}
		}

		.productItems_right {
			margin-left: 24rpx;
			width: calc(100% - 210rpx);

			.productItems_right_top,
			.productItems_right_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 40rpx;
				font-size: 24rpx;
				color: #657180;
				position: relative;

				.productItems_right_top_icon {
					position: absolute;
					right: 0;
					top: 0;
				}


				.productItems_right_top_left {
					width: calc(100% - 180rpx);
					font-weight: 500;
					font-size: 28rpx;
					color: #464C5B;
					height: 40rpx;
					line-height: 40rpx;
					text-align: left;

				}

				.productItems_right_top_right {
					font-size: 24rpx;
					color: #657180;
					width: 180rpx;
					text-align: right;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #00C795;

					.yd {
						width: 8rpx;
						height: 8rpx;
						background: #00C795;
						border-radius: 50%;
						margin-right: 8rpx;
					}

				}

			}

			.productItems_right_bottom {
				margin-top: 24rpx;
				position: relative;

				.productItems_right_bottom_btn {
					position: absolute;
					width: 92rpx;
					height: 48rpx;
					background: #295EFF;
					border-radius: 8rpx;
					line-height: 48rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					right: 0;
				}

				.productItems_right_bottom_left {
					color: #FF5A5F;
					font-size: 28rpx;
					font-weight: bold;

					span {
						color: #BFBFBF;
						font-size: 24rpx;
						margin-left: 16rpx;
						font-weight: 500;
					}

				}

				.productItems_right_bottom_right {
					width: 88rpx;
					height: 48rpx;
					background: #295EFF;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					line-height: 48rpx;

				}

			}
		}
	}





	.viewingSettingsWhite {
		font-size: 24rpx;
		color: #295EFF;
		text-align: right;
		position: absolute;
		right: 56rpx;
		// top: 350rpx;
		margin-top: 15rpx
	}

	.liveInformationBtn {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;

		.liveInformationBtnCont {
			width: 640rpx;
			height: 80rpx;
			background: #295FFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;

		}
	}


	.redDB {
		width: 100%;
		min-height: 380rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 99;

		.redDB_items {
			width: 750rpx;
			height: 112rpx;
			background: #FFFFFF;
			font-size: 34rpx;
			color: #000;
			text-align: center;
			line-height: 112rpx;
			border: 1rpx solid #F2F2F2;
		}

		.redDB_items_btn {
			border: none;
			border-top: 16rpx solid #F2F2F2;


		}
	}
}
</style>